<!--
 * @Author: pjji
 * @describe: readyAudit 待审核
 * @LastEditTime: 2022-02-11 10:25:18
-->
<template>
    <div class="container readyAudit">
        <!-- 查询表单 -->
        <!--    :searchFormRules="searchFormRules"-->
        <search ref="search" :searchForm="searchForm" @searchFun="search" />
        <!-- 分页列表 -->
        <pagerList ref="pagerList" :api="_API.getList" :params="searchForm" :handleData="handleData">
            <template v-slot="slotProps">
                <!-- tableTitle -->
                <tableTitle :title="curTabsTitle" :btnGroupArry="btnGroupArry" @tableTitleBtnClick="btnGroupClick" />
                <!-- table -->
                <el-table :data="slotProps.listData" header-cell-class-name="headerClass" style="width: 100%">
                    <el-table-column type="index" width="50">
                    </el-table-column>
                    <el-table-column prop="userName" label="名称" align="center" width="120" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="String" label="编号" align="center" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="Date" sortable label="日期" align="center" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="Url" label="地址" align="center" show-overflow-tooltip></el-table-column>
                    <el-table-column align="center" label="操作" width="100">
                        <template slot-scope="scope">
                            <el-button v-if="scope.row.status" type="text" size="large" @click="edit(scope.row)">Edit</el-button>
                            <span v-else>--</span>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
        </pagerList>
        <!-- 操作弹框-->
        <operationDetail :detail-form="detailForm" :detail-form-rules="detailFormRules" :title="title"
            ref="operationDetail" />
    </div>
</template>

<script>
import pagerList from '@comp/pagerList'; //分页列表组件
import search from './components/search'; //Search表单 业务组件
import tableTitle from './components/tableTitle'; //表头 业务组件
import operationDetail from "./components/operation";
import { mapState } from 'vuex';
import common from '@/mixins/common' //公共函数
import _ from "lodash";
export default {
    components: {
        search,
        tableTitle,
        pagerList,
        operationDetail
    },
    mixins: [common],
    data () {
        return {
            // 当前选中的tabs选项卡 标题
            curTabsTitle: 'List',
            title: 'Add', // dialog操作标题
            // 表头 按钮组配置 && 详情页 按钮组配置
            btnGroupArry: [
                {
                    label: 'Add',
                    type: 'add',
                    class: 'primary'
                },
                {
                    label: 'Export',
                    type: 'excel',
                    class: 'warning'
                }
            ],
            //查询表单
            searchForm: {
                company: '', //审核
                updateStartTime: '', //审核时间 开始时间
                updateEndTime: '', //审核时间 结束时间
                industry: '',   // 产业
            },
            // 增删改查操作
            detailForm: {
                company: '',
                code: '',
                companyName: '',
            },

            //表格选中数据
            tableSelectData: [],
            //校验规则
            detailFormRules: {
                company: [
                    { required: true, message: '名称不能为空', trigger: 'submit' },
                ],
                code: [
                    { required: true, message: '编码不能为空', trigger: 'submit' }
                ],

                companyName: [
                    { required: true, message: '请输入名称', trigger: 'submit' }
                ]
            },
        }
    },
    computed: {
        _API () {
            return this.$api.test;
        },
    },
    methods: {
        //重置Search入参
        resetSearchForm () {
            for (const key in this.searchForm) {
                if (this.searchForm.hasOwnProperty(key)) {
                    this.searchForm[key] = '';
                }
            }
        },
        //查询时间
        search (key) {
            this.$nextTick(() => {
                this.$refs.pagerList.searchFun(false);
            });
        },
        //表头 || 详情页 按钮组 按钮点击
        btnGroupClick (type) {
            switch (type) {
                case 'add':
                    this.title = 'Add'
                    this.$refs.operationDetail.handleShow('add')
                    break;
                case 'excel':
                    this.title = 'Export'
                    this.$refs.operationDetail.handleShow('excel')
                    break;
                default:
            }
        },

        // 数据二次处理
        handleData (res) {
            const _obj = {
                rows: res.data.rows,
                total: res.data.total
            }
            return _obj;
        },
        // Edit
        edit (row) {
            // Edit复现
            this.detailForm = {
                company: '',
                code: '',
                companyName: '',
            }
            this.$refs.operationDetail.handleShow('editor')
        }
    },
    mounted () {
        // 设置默认选中的tabs选项卡

    },
    created () {
        window.vm = this
        this.search();
    }
}
</script>

<style lang="scss" scoped>
.readyAudit {
    .a_w {
        width: 100%;
    }

    :deep(.el-table) {
        font-size: 12px;
    }

    :deep(.el-table) td,
    .el-table th.is-leaf {
        border-bottom: 1px solid #e3eefd;
    }

    :deep(.el-table) th.headerClass {
        background: #f5f9ff;
    }
}
</style>
